<template>
  <div class="conall">
    <!-- 图标和title -->
    <div class="logoTitle">
      <img src="../assets/logo.png" alt />
      <span>健身房管理系统</span>
    </div>
    <!-- 用户信息容器 -->
    <div class="userDeteil">
      <el-avatar :size="60" :src="userImg"></el-avatar>
      <div class="userItem">
        <span>{{time}}</span>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{username}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-user-solid" @click="handlePersonMsg">
              <el-button @click="handlePersonMsg" style="border:none">个人信息</el-button>
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-close">
              <el-button @click="handleLogout" style="border:none">退出登录</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-dialog title="个性信息" :visible.sync="dialogFormVisible">
      <el-table :data="userData">
        <el-table-column prop="name" label="管理员"></el-table-column>
        <el-table-column prop="Imgurl" label="头像"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["username"],
  name: "HeaderCon",
  data() {
    return {
      currenttime: this.getTime(),
      name: window.localStorage.getItem("username"),
      description: this.name == "root" ? "顶级管理员" : "普通管理员",
      userImg: "",
      dialogFormVisible: false,
      userData: []
    };
  },
  methods: {
    getTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${hours}:${minutes}:${seconds}`;
    },
    updatetime() {
      this.currenttime = this.getTime();
    },
    handlePersonMsg() {
      this.userData.push({
        name: this.name,
        Imgurl: this.userImg,
        description: this.description
      });
      this.dialogFormVisible = true;
    },
    handleLogout() {
      const localtoken = window.localStorage.getItem("token");
      if (localtoken) {
        this.$axios
          .get("http://47.108.248.93:999/loginOut", { headers: { token: localtoken } })
          .then(res => {
            this.$message({
              message: res.data.msg,
              type: "warning"
            });
          });
      }
      window.localStorage.removeItem("token");
      window.localStorage.removeItem("username");
      this.$router.push("/");
    },
    handleCancel() {
      this.dialogFormVisible = false;
    }
  },
  created() {
    setInterval(this.updatetime, 1000);
    this.$axios
      .get("http://47.108.248.93:999/GetImg", {
        headers: {
          token: window.localStorage.getItem("token")
        }
      })
      .then(res => {
        this.userImg = res.data.data;
      });
  },

  computed: {
    time() {
      return this.currenttime;
    }
  }
};
</script>
<style scoped>
.conall {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 20px;
  margin: 0 0;
  background-color: #fff;
}
.logoTitle {
  display: flex;
  align-items: center;
}
.logoTitle img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
.logoTitle span {
  font-size: 20px;
  font-weight: 600;
}
.userDeteil {
  display: flex;
  align-items: center;
}
.userItem {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.userItem span {
  font-size: 16px;
  font-weight: 600;
  margin-right: 10px;
  color: #999;
  cursor: pointer;
}
.userItem .el-dropdown-link {
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  color: #999;
}
.userItem .el-dropdown-link:hover {
  color: #409eff;
}
.userItem .el-icon-arrow-down {
  font-size: 16px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
}
.userItem .el-icon-arrow-down:hover {
  color: #409eff;
}

.userItem .el-dropdown-menu {
  width: 100px;
}
</style>